<template>
  <div>
    <Tabs v-model:activeKey="activeKey" type="card" :animated="true" :tabBarGutter="0">
      <TabPane key="1" tab="CCE" forceRender>
        <CceRuleTable></CceRuleTable>
      </TabPane>
      <TabPane key="2" tab="CES" forceRender>
        <CesRuleTable />
      </TabPane>
      <template #renderTabBar="{ DefaultTabBar, ...props }">
        <component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.8, color: 'grey' }" />
      </template>
    </Tabs>
  </div>
</template>

<script lang="ts" setup>
import { TabPane, Tabs } from 'ant-design-vue';
import { ref } from 'vue';
import CesRuleTable from '/@/views/maintenance-center/alarm-rule/new-ces-rule/cesRuleTable.vue';
import CceRuleTable from '/@/views/maintenance-center/alarm-rule/new-cce-rule/cceRuleTable.vue';

let activeKey = ref('1');
</script>
